<template>
	<view class="main">
		<view class="demo" style="width: 100%;font-weight: bold;color: white;text-align: center;">
			<span>{{startTime.substring(0,7)}}月{{deptName}} 分层审核周报</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				一、审核计划管理（评估本部门审核完成情况）
			</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				{{shlText}}
			</span>
		</view>
		<view class="demo">
			<h-title title="(1)近三月审核完成率" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				近三月审核完成率
			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view class="demo">
			<h-title title="(1)各车间/科室审核完成情况" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				当月各车间/科室审核完成情况
			</view>
			<qiun-data-charts type="mix" :opts="optsDept" :chartData="chartDataDept" />
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				二、审核实施管理（评估本部门识别问题能力）
			</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				{{sbwtText}}
			</span>
		</view>
		<view class="demo">
			<h-title title="(1)近3个月各车间/科室发起问题数量" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				近3个月各车间/科室发起问题数量
			</view>
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartDataFQ" />
		</view>
		<view class="demo">
			<h-title title="(2)近3个月各车间/科室人均提出项数" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				近3个月各车间/科室人均提出项数
			</view>
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartDataTC" />
		</view>
		<view class="demo">
			<h-title title="(3)审核问题分类TOP5" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				审核问题分类TOP5
			</view>
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartDataClass" />
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				三、问题管理（评估本部门问题解决的能力）
			</span>
		</view>
		<view class="demo">
			<h-title title="(1)超期问题各科室统计" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				超期问题各科室统计
			</view>
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartOverIssue" />
		</view>
		<!-- <view class="charts-box">
			<view class="content title">
				审核问题提出情况
			</view>
			<qiun-data-charts type="mix" :opts="optsQues" :chartData="chartDataQues" />
		</view> -->

		<view class="demo">
			<h-title title="(2)超期问题清单" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view>
			<view class="demo">
				<lq-table :data="overdueQuestiuonData" :column="columnCQ" width="100%">
					<template v-slot:createDate="{row,index}">
						<text>{{formatDate(row.CREATE_TIME)}}</text>
					</template>
					<template v-slot:owerName="{row,index}">
						<text v-if="row.OWERNAME">{{row.OWERNAME}}</text>
						<text v-else>---</text>
					</template>

				</lq-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPlanBy5WeekByMonthData,
		getPlanByDivisionByMonthData,
		getPlanAndIssueByDivisionByMonthData,
		getClassQuestionsByMonthData,
		getOverIssueByMonthData,
		getNoPlanByMonthAndDivisionData,
		getTextDisplayByMonthData,
		getOverIssueByMonthListData,
		getIuuseByDivisionBy3MonthData
	} from "../../static/main.js"
	export default {
		data() {
			return {
				overdueQuestiuonData: [],
				chartData: {},
				startTime: "",
				endTime: "",
				deptName: "",
				chartDataDept: {},
				chartDataQues: {},
				chartDataClass: {},
				chartOverIssue: {},
				chartNoPlanByMonth: {},
				shlText: '',
				sbwtText: "",
				overIssueList: [],
				chartDataTC: {},
				chartDataFQ: {},
				opts: {
					color: ["#FAC858"],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {
						fontColor: "#fff"
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#fff"
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							fontColor: "#fff",
							title: ""
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",

						}
					}
				},
				optsDept: {
					color: ["#FAC858", "#EE6666"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						fontColor: "#fff"
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#fff"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#ffffff",
						padding: 10,
						showTitle: true,
						data: [{
							position: "left",
							fontColor: "#fff",
							title: "数量",
							titleFontColor: "#fff",
						}, {
							position: "right",
							fontColor: "#fff",
							titleFontColor: "#fff",
							title: "完成率",
							min: 0,
							max: 100,
						}]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
				columnCQ: [{
					type: 'index',
					label: '序号',
					width: '5'
				}, {
					label: '创建日期',
					width: '35',
					slotName: 'createDate',
					type: 'slot',
				}, {
					label: '线体名称',
					prop: 'PL_NAME',
					width: '25'

				}, {
					label: '问题描述',
					prop: 'QUESTION_REMARK',
					width: '30'
				}, {
					label: '责任人',
					slotName: 'owerName',
					type: 'slot',
					width: '5'
				}, {
					label: '状态',
					prop: 'CHAOQI',
					width: '5'
				}],
				optsQues: {
					color: ["#FAC858", "#EE6666"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						fontColor: "#fff"
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#fff"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#ffffff",
						padding: 10,
						showTitle: true,
						data: [{
							position: "left",
							fontColor: "#fff",
							title: "数量",
							titleFontColor: "#fff",
						}, {
							position: "right",
							fontColor: "#fff",
							titleFontColor: "#fff",
							title: "",
						}]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
			};
		},
		onReady() {
			this.startTime = localStorage.getItem("startTime");
			this.endTime = localStorage.getItem("endTime");
			this.deptName = localStorage.getItem("deptName")
			//近五月审核完成率
			this.getPlanBy5WeekByMonth();
			//当月各车间科室审核任务完成情况
			this.getPlanByDivisionByMonth();
			//各科室审核问题提出情况
			// this.getPlanAndIssueByDivisionByMonth();
			// 审核问题分类Top5
			this.getClassQuestionsByMonth();
			//超期问题统计
			this.getOverIssueByMonth()
			//未完成科室统计
			// this.getNoPlanByMonthAndDivision()
			//文字描述部分
			this.getTextDisplayByMonth()
			//超期问题清单
			this.getOverIssueByMonthList();
			//近3个月各车间/科室发起问题数量，人均提出数量
			this.getIuuseByDivisionBy3Month()
		},
		methods: {
			//格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				return date.toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				});
			},
			//近3个月各车间/科室发起问题数量，人均提出数量
			getIuuseByDivisionBy3Month() {
				const vm = this;
				getIuuseByDivisionBy3MonthData().then(res => {
					const resault = res.data
					let categoriesArr = []
					let seriesfq = []
					let seriestc = []
					let fqdata = []
					let tcdata = []
					if (resault.code == "200") {
						const data = resault.data
						var length = data.length - 1;
						//横坐标
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[length - index].MONTH)
						}
						const auditPlanList = data[0].auditPlanList
						for (var index = 0; index < auditPlanList.length; index++) {
							seriesfq.push({
								name: auditPlanList[index].departmentName,
								data: [],
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle",
								type: 'column'
							})
							seriestc.push({
								name: auditPlanList[index].departmentName,
								data: [],
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle",
								type: 'column'
							})
						}
						for (var index = 0; index < data.length; index++) {
							let auditPlanList = data[length - index].auditPlanList
							for (var index1 = 0; index1 < auditPlanList.length; index1++) {
								seriestc[index1].data.push(auditPlanList[index1].issuesRaised)
								seriesfq[index1].data.push(auditPlanList[index1].issueNum)
							}

						}


						let res1 = {
							categories: categoriesArr,
							series: seriestc
						};
						vm.chartDataTC = JSON.parse(JSON.stringify(res1));
						let res2 = {
							categories: categoriesArr,
							series: seriesfq
						};
						vm.chartDataFQ = JSON.parse(JSON.stringify(res2));

					}


				})
			},

			//超期问题清单
			getOverIssueByMonthList() {
				const vm = this;
				getOverIssueByMonthListData().then(res => {
					const resault = res.data
					if (resault.code == "200") {
						const overdueissuesFinallyList = resault.data.overdueissuesFinallyList;
						const overdueissuesList = resault.data.overdueissuesList
						overdueissuesFinallyList.push(...overdueissuesList)
						vm.overdueQuestiuonData = overdueissuesFinallyList;

					}

				})
			},
			//文字描述部分
			getTextDisplayByMonth() {
				const vm = this;
				getTextDisplayByMonthData().then(res => {
					let STARTTIME = "";
					let ENDTIME = "";
					let departmentName = "";
					let auditSize = 0;
					let auditRate = "0%";
					let closeNum = 0;
					let issuesRaised = "0项/人/次";
					let rateMaxDepName = "";
					let rateMaxDepRate = "0%";
					let rateMinDepName = "";
					let rateMinDepRate = "0%";
					let reviewCount = 0;
					let totleNum = 0;
					let openNum = 0
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data;
						STARTTIME = data.STARTTIME;
						ENDTIME = data.ENDTIME;
						departmentName = data.departmentName;
						auditSize = data.auditSize;
						auditRate = data.auditRate;
						closeNum = data.closeNum;
						issuesRaised = data.issuesRaised;
						rateMaxDepName = data.rateMaxDepName;
						rateMaxDepRate = data.rateMaxDepRate;
						rateMinDepName = data.rateMinDepName;
						rateMinDepRate = data.rateMinDepRate;
						reviewCount = data.reviewCount;
						totleNum = data.totleNum;
						openNum = data.openNum;
					}
					vm.deptName = departmentName;
					vm.shlText = STARTTIME.substring(0, 7) + '月' + departmentName + ' ，审核计划共' + auditSize +
						'项，完成' + reviewCount + '项，计划完成率' + auditRate + '。' + rateMaxDepName + '审核完成率最高，为' +
						rateMaxDepRate + '';
					vm.sbwtText = "共识别问题" + totleNum + "项，人均审核问题提出" + issuesRaised + "项/人/次";
				})
			},
			//未完成科室统计
			getNoPlanByMonthAndDivision() {
				const vm = this
				getNoPlanByMonthAndDivisionData().then(res => {
					console.log(res)
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].DIVISION_NAME)
							categoriesdata.push(data[index].noPlanNum)
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle",
								type: 'column'
							}]
						};
						vm.chartNoPlanByMonth = JSON.parse(JSON.stringify(res));
					}

				})
			},
			//超期问题统计
			getOverIssueByMonth() {
				const vm = this
				getOverIssueByMonthData().then(res => {
					console.log(res)
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].divisionName)
							categoriesdata.push(data[index].overIssueNum)
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle",
								type: 'column'
							}]
						};
						vm.chartOverIssue = JSON.parse(JSON.stringify(res));
					}
				})
			},
			// 审核问题分类Top5
			getClassQuestionsByMonth() {
				const vm = this
				getClassQuestionsByMonthData().then(res => {
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].WTTKBH)
							categoriesdata.push(data[index].issueNum)
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle",
								type: 'column'
							}]
						};
						vm.chartDataClass = JSON.parse(JSON.stringify(res));
					}
				});
			},
			//各科室审核问题提出情况
			getPlanAndIssueByDivisionByMonth() {
				const vm = this
				getPlanAndIssueByDivisionByMonthData().then(res => {
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriestotal = []
						let categoriesrate = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].DIVISION_NAME)
							categoriestotal.push(data[index].totleNum)
							categoriesrate.push(data[index].auditRate)
						}
						let res1 = {
							categories: categoriesArr,
							series: [{
									name: "人均提出项数",
									type: "line",
									textColor: "#fff",
									data: categoriesrate,
									index: '1'
								},
								{
									name: "发起问题数量",
									type: "column",
									style: "curve",
									textColor: "#fff",
									data: categoriestotal,
									index: '0'
								},
							]
						};
						vm.chartDataQues = JSON.parse(JSON.stringify(res1));
					}

				});
			},
			//当月各车间科室审核任务完成情况
			getPlanByDivisionByMonth() {
				const vm = this
				getPlanByDivisionByMonthData().then(res => {
					console.log(res)
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriestotal = []
						let categoriescomplete = []
						let categoriesrate = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].DIVISION_NAME)
							categoriescomplete.push(data[index].completedPlan)
							categoriestotal.push(data[index].totalPlan)
							categoriesrate.push(data[index].ratePlan.substring(0, data[index].ratePlan.length - 1))
						}
						let res1 = {
							categories: categoriesArr,
							series: [{
									name: "完成率",
									type: "line",
									textColor: "#fff",
									data: categoriesrate
								},
								{
									name: "总计划数",
									type: "column",
									style: "curve",
									textColor: "#fff",
									data: categoriestotal
								},
								{
									name: "完成数",
									type: "column",
									style: "curve",
									textColor: "#fff",
									data: categoriescomplete
								}
							]
						};
						vm.chartDataDept = JSON.parse(JSON.stringify(res1));
					}
				})
			},
			//近五月审核完成率
			getPlanBy5WeekByMonth() {
				const vm = this
				getPlanBy5WeekByMonthData().then(res => {
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						var length = data.length - 1;
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[length - index].MONTH)
							categoriesdata.push(data[length - index].auditRate.substring(0, data[length - index]
								.auditRate.length - 1))
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "完成率",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle"
							}]
						};
						vm.chartData = JSON.parse(JSON.stringify(res));
					}
				})
			},

		}
	};
</script>

<style scoped>
	.main {
		background-image: url("../../static/allbgc.png");
		background-size: 100% 50%;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		padding-bottom: 50px;
		background-size: 100% 100%;
		margin-top: 5px;
	}

	.demo {
		margin-top: 5px;
		padding: 5px;
	}

	.title {

		font-weight: bold;
		text-align: center;
		color: white;
		margin-left: 15px;
		padding: 13px;
	}

	.textArea {
		text-align: left;
		width: 100%;
		font-weight: bold;
		margin: 5px;
	}
</style>